<script src='file:///C:/workspace/socratica-open/content/gadgets/igoogle.js'/>
<body>

<script type="text/javascript">
var img = "<img src='http://www.socratica.com/images/Polyhedron.gif'/>";
var names = [ "Home", "Definition", "Dodecahedron", "Hexahedron",
    "Icosahedron", "Octahedron", "Tetrahedron" ];
var descs = [
    "",
    "<br/>A <i>Platonic Solid</i> is a solid figure where faces are identical polygons, "
        + "every vertex has the same number of joining faces, and it is <i>convex</i>. "
        + "Loosely put, a solid is convex if it never 'juts inward'. "
        + "Platonic solids are named in honor of Plato, even though he wasn't the one "
        + "who discovered them.", "12 faces, each a pentagon",
    "6 faces, each a square", "20 faces, each a triangle",
    "8 faces, each a triangle", "4 faces, each a triangle" ];
var page_index = 0;

function next() {
  if (page_index == 0) {
    _toggle(_gel('home'));
    _toggle(_gel('page'));
    _toggle(_gel('prev'));
  }
  page_index++;
  if (page_index == 6) {
    _toggle(_gel('next'));
  }
  show();
}

function prev() {
  if (page_index == 6) {
    _toggle(_gel('next'));
  }
  page_index--;
  if (page_index == 0) {
    _toggle(_gel('home'));
    _toggle(_gel('page'));
    _toggle(_gel('prev'));
  }
  show();
}

function show() {
  if (page_index == 0)
    return;
  _gel('name').innerHTML = names[page_index];
  if (page_index > 1) {
    _gel('image').innerHTML = img.replace("Polyhedron", names[page_index]);
    _gel('desc').innerHTML = descs[page_index];
    _gel('def').innerHTML = '';
  } else {
    _gel('image').innerHTML = '';
    _gel('desc').innerHTML = '';
    _gel('def').innerHTML = descs[page_index];
  }
}
</script>

<style type="text/css">
img {
  border: 0;
}
.title {
  background: #eeeeee;
  border-bottom: 1px solid #555;
  border-top: 1px solid #555;
  font-family: palatino, georgia, arial, sans-serif;
  font-size: 150%;
  margin-top: 15%;
  padding: 10px;
  text-align: center;
}
.logo {
  bottom: 1em;
  left: 0;
  position: relative;
  text-align: center;
  width: 100%;
}
#name {
  background: #eeeeee;
  border-bottom: 1px solid #555;
  border-top: 1px solid #555;
  margin-top: 1.5em;
  padding: 5px;
  text-align: center;
  width: 100%;
}
#desc {
  bottom: 0.5em;
  position: relative;
  text-align: center;
  width: 100%;
}
#def {
  text-align: left;
  width: 100%;
}
#image {
  position: relative;
  text-align: center;
  top: 2em;
  width: 100%;
}
#nav {
  font-size: 100%;
  text-align: center;
  width: 100%;
}
#next {
  color: #00f;
  cursor: pointer;
  position: relative;
  right: 0px;
  top: 0px;
}
#prev {
  color: #00f;
  cursor: pointer;
  position: relative;
  left: 0px;
  top: 0px;
}
#overview {
  width: 100%;
}
#polyhedron {
  text-align: center;
}
#home {
  height: 275;
}
#page {
  height: 275;
}
</style>


<table width='275px' height='275px' border='0'>
  <tr>
    <td align='left'><span id='prev' onClick='prev();' style='display: none;'><nobr>&laquo; Previous</nobr></span></td>
    <td align='right'><span id='next' onClick='next();'><nobr>Next &raquo;</nobr></span></td>
  </tr>
  <tr>
    <td id='home' colspan='2' width='100%' valign='top'>
      <table border='0' width='100%' height='100%'>
        <tr>
          <td class='title' valign='top'>The Platonic Solids</td>
        </tr>
        <tr>
          <td align='center' height='100%'>
            <img src='http://socratica.com/images/gadgets/platonic_solids/drawn_tetrahedron.png'/>
          </td>
        </tr>
        <tr>
          <td align='center'>
            
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr width='100%'>
    <td id='page' style='display:none;' colspan='2' width='100%' valign='top'>
      <table border='0' width='100%'>
        <tr><td id='name'></td>
        <tr><td id='image'></td>
        <tr><td id='desc'></td>
        <tr><td id='def'></td>
      </table>
    </td>
  </tr>
</table>


</body>